<template>
    <div>
        <div class="shou">
            <div class="shou-top">
                <div class="top-left">
                <h4>今年</h4>
                <b>￥{{ShouruArr.data.year}}</b>
            </div>

            <div class="top-left">
                <h4>总收入</h4>
                <b>￥{{ShouruArr.data.total}}</b>
            </div>
            </div>

            <div class="btn"> <img src="../../assets/images/底框.png" alt=""> <span>同比 <i>{{ShouruArr.data.contrast}}</i> </span></div>

                 <div class="shouCount">
                <h2>
                    <img src="../../assets/images/收入统计.png" alt="">收入统计
                </h2>
            </div>

            <ul class="count-year">
                <li v-for="(item,index) in ShouruArr.data.list" :key="index">
                    <span>{{item.year}}年</span>
                    <span>{{item.income}}</span>
                </li>
               
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:["ShouruArr"],
    data () {
        return {

 
        }
    },
    methods:{

    }
}
</script>
 
<style lang = "less" scoped>
.shou{
    width: 95%;
    margin: 10px auto;
    background-color: #fff;
    padding: 20px 30px;
    box-sizing: border-box;
    border-radius: 5px;
    .shou-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    

     .top-left{
        position: relative;
        h4{
            color: #999;
            font-size: 12px;
            margin-bottom: 8px;
        }
        &:nth-of-type(1)::before{
            content: "";
            width: 2px;
            height: 30px;
            background-color: #efefef;
            position: absolute;
            top: 0;
            right: -55px;
        }
        b{
            color:#fad157 ;
            font-size: 18px;
        }
    }
}

  .btn{
       position: relative;
       img{
           width: 30%;
          
       }
       span{
           position: absolute;
           bottom: 10px;
           left: 8px;
           font-size: 12px;
           i{
               color: #0849cb;
           }
       }
    }
   
   .shouCount{
       height: 50px;
       line-height: 50px;
       margin-top:20px ;
       border-top: 1px dashed #e5e5e5;
       padding: 10px;
       box-sizing: border-box;
       color: #666;
       display: flex;
       align-items: center;
       font-size: 18px;
        img{
            width: 20px;
            margin-right: 10px;
            
        }

   }

    .count-year{
        border-bottom: 1px solid rgb(209, 208, 208);
        li{
            padding: 15px;
            border-top: 1px dashed #e5e5e5;
            display: flex;
            justify-content: space-between;

          span{
            &:nth-of-type(1){
              color: #999;
          }
          &:nth-of-type(2){
              color: #fad157;
          }
          }
        }
    }

}

</style>